<script setup>
import {useRoute} from "vue-router";
import {onMounted} from "vue";
import {ElNotification} from 'element-plus'

const route = useRoute()
onMounted(() => {
  ElNotification({
    title: '✨金牌赞助商✨',
    dangerouslyUseHTMLString: true,
    duration: 0,
    showClose: false,
    message: "<div style='border-bottom: 2px solid #C0C4CC'></div>" +
        "<div style=\"margin-top: 10px\">\n" +
        "      <a href=\"https://www.testing-studio.com/\" target=\"_blank\">\n" +
        "        <img src=\"https://ceshiren.com/uploads/default/original/3X/7/0/70299922296e93e2dcab223153a928c4bfb27df9.jpeg\"\n" +
        "             alt=\"霍格沃兹测试开发学社\" style=\"width: 100%\"/>\n" +
        "      </a>\n" +
        "    </div>\n" +
        "    <div style=\"margin-top: 10px\">\n" +
        "      <a href=\"https://ec.diwork.com/\" target=\"_blank\">\n" +
        "        <img src=\"https://ec.diwork.com/html/index/img/newlogo.png\"\n" +
        "             alt=\"友空间\" style=\"width: 100%\"/>\n" +
        "      </a>\n" +
        "    </div>",
    position: 'bottom-left',
  })
})
</script>

<template>
  <el-container direction="vertical">
    <el-header>
      <el-menu style="justify-content:flex-end;position: relative"
               :default-active="route.path"
               class="el-menu-demo"
               mode="horizontal"
               router
      >
        <img src="./assets/logo2.png" style="position: absolute;left:10px;top:5px" height="50"/>
        <el-menu-item index="/Home">首页</el-menu-item>
        <el-menu-item index="/Case">
          <div style="display: flex"><span>用户案例</span>
          </div></el-menu-item>
        <el-menu-item index="/Deploy">部署文档</el-menu-item>
        <el-menu-item index="/Version">
          <div style="display: flex"><span>版本记录</span>
            <el-badge value="new" class="item" style="margin-top: -2px;margin-left: 5px">
            </el-badge>
          </div>
        </el-menu-item>
        <el-sub-menu index="1">
          <template #title>其他</template>
          <el-menu-item index="/Document">
            <div style="display: flex"><span>使用文档</span>
              <el-badge type="primary" value="building" class="item" style="margin-top: -2px;margin-left: 5px">
              </el-badge>
            </div></el-menu-item>
          <el-menu-item index="/Mine">关于Sonic与我</el-menu-item>
        </el-sub-menu>
        <el-menu-item><a href="https://github.com/SonicCloudOrg" target="_blank"><img src="./assets/github.png"
                                                                                  height="30"/></a>
        </el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <router-view/>
    </el-main>
  </el-container>
</template>

<style>
#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
  'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.el-card * {
  color: #606266;
}

.el-tab-pane {
  padding: 0 4%;
}

.el-card {
  border-radius: 25px !important;
}

.back {
  padding: 0 180px;
}

.demo-tree-scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}

.banner {
  position: fixed;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner2 {
  position: fixed;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

html,
body,
#app,
.el-container {
  padding: 0px;
  margin: 0 !important;
  height: 100%;
}

code {
  font-family: "JetBrains Mono", source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  border-radius: 10px;
  padding: 20px 20px;
  background-color: #303133;
}

li {
  margin: 12px 0;
}

.el-menu-item {
  margin: 0;
}

.el-timeline-item {
  margin: 0;
}

blockquote {
  border-radius: 5px;
  font: 14px/22px normal helvetica, sans-serif;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 30px;
  padding: 10px 10px 10px 15px;
  border-left: 3px solid #409EFF;
  background-color: #F2F6FC
}

a:link {
  color: #409EFF
}

a:visited {
  color: #409EFF
}

table {
  width: 100%;
  border-collapse: collapse;
}

table td, table th {
  border: 1px solid #C0C4CC;
  padding: 12px;
}

table th {
  background-color: #E4E7ED;
  color: #909399;
}

table tbody tr:hover > td {
  background-color: #F2F6FC !important
}

.el-avatar{
  background-color: transparent!important;
}

.el-notification{
  padding: 14px 13px 14px 13px!important;
  width: 170px!important;
}
.el-notification__group{
  margin: 0!important;
}
.el-notification__title{
  text-align: center;
}
</style>
